<script setup lang="ts">
import { ref, watch } from "vue";
const name = ref("张三");
const watch1Msg = ref("");

watch(
  // 1. 如果要侦听多个对象，使用数组：[foo, bar]，对应的侦听到的值也是数组
  // 2. 如果要侦听某个对象的某个属性，使用回调，() => obj.foo.bar
  name,
  (newVal, oldVal) => {
    watch1Msg.value = `WATCH_1: ${oldVal} -> ${newVal}`;
  },
  {
    immediate: true, // 立即执行
    deep: false, // 深度侦听. reactive 默认就是深度侦听，ref 要显式设置该属性
    flush: "pre", // pre: 组件更新之前执行；sync：同步执行；post：组件更新之后执行
  }
);
</script>

<template>
  <div>
    <div>case1: <input v-model="name" /></div>
    <div>{{ watch1Msg }}</div>
  </div>
</template>

<style scoped></style>
